<template>
	<view>
		<mynavigationbar text="个人信息"/>
		<image src="../../static/images/bind/header.png" mode="" class="header"></image>
		<view class="box">
			<view class="title">基本信息</view>
			<view class="info-item">
				<view class="label">学<text style="padding: 0 32rpx;"></text>号：</view>
				<view class="info">{{ userInfo.student_number }}</view>
			</view>
			<view class="info-item">
				<view class="label">真实姓名：</view>
				<view class="info">{{ userInfo.real_name }}</view>
			</view>
		</view>
		<view class="box">
			<view class="title">详细信息</view>
			<view class="info-item">
				<view class="label">联系电话：</view>
				<view class="info">{{ userInfo.mobile }}</view>       
			</view>
			<view class="info-item">
				<view class="label">所在专业：</view>
				<view class="info">{{ userInfo.depart_name }}</view>
			</view>
		</view> 
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {}
			}
		},
		onLoad() {
			this.getUserInfo()
		},
		methods: {
			async getUserInfo(){
				const { data: res } = await uni.$http.post('/user/updOrGetUserInfo', { type: 1 })
				// console.log(res.data)
				this.userInfo = res.data
			}
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f6f6fe;
	}
	.header {
		display: block;
		width: 170rpx;
		height: 170rpx;
		margin: 40rpx auto;
	}
	.box {
		width: 85%;
		height: 276rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		box-shadow: 0 2px 2px 2px rgba(150, 150, 150, .3);
		margin: 0 auto 45rpx;
		padding-left: 55rpx;
		.info-item {
			display: flex;
			margin-bottom: 40rpx;
			color: #6a6a6a;
		}
		
		.title {
			position: relative;
			font-size: 34rpx;
			font-weight: bold;
			line-height: 84rpx;
			margin-bottom: 20rpx;
			color: #494949;
			&::before {
				position: absolute;
				top: 28rpx;
				left: -25rpx;
				content: '';
				width: 8rpx;
				height: 36rpx;
				background-color: #66c2a9;
				border-radius: 5rpx;
			}
		}
	}
</style>
